﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <meta name="keywords" content="jQuery, Tabs, Tab Control, Tab Strip, Tab View, jqxTabs, jQuery Tabs, jquery mobile tabs, jquery mobile tabcontrol, jqwidgets tabcontrol" />
    <meta name="description" content="This page represents the help documentation of the jqxTabs widget." />
    <title>jqxTabs API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="properties">
        <h2 class="documentation-top-header">
            Properties</h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='property-name-disabled'>width</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    auto
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets widget's width.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>width</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({width:"200px"});</code></pre>
                        <p>
                            Get the <code>width</code> property.
                        </p>
                        <pre><code>var width = $('#jqxTabs').jqxTabs('width');</code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kYyW5/">width is set to 300</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>height</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    auto
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Sets or gets widget's height.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>height</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({height:"400px"});</code></pre>
                        <p>
                            Get the <code>height</code> property.
                        </p>
                        <pre><code>var height = $('#jqxTabs').jqxTabs('height');</code></pre>
                                  <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/w6UT3/">height is set to 150</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span2'>disabled</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the jqxTabs widget.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                           Set the <code>disabled</code> property .
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ disabled:true }); </code></pre>
                         <p>
                            Get the <code>disabled</code> property.
                        </p>
                        <pre><code>var disabled = $('#jqxTabs').jqxTabs('disabled');</code></pre>
                                                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sE8QA/">disabled is set to true</a></div>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span49'>rtl</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                       <p> Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.</p>
                       <h4>
                            Code example</h4>
                        <p>
                            Set the <code>rtl</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({rtl : true}); </code></pre>
                        <p>
                            Get the <code>rtl</code> property.
                        </p>
                        <pre><code>var rtl = $('#jqxTabs').jqxTabs('rtl'); </code></pre>
                                                                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6e2rM/">rtl is set to true</a></div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span68'>theme</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the widget's theme.</p>
                        jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.
                        In order to set a theme, you need to do the following:
                        <ul>
                            <li>Include the theme's CSS file after jqx.base.css.<br />The following code example adds the 'energyblue' theme.
<pre><code>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot; type=&quot;text/css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.energyblue.css&quot; type=&quot;text/css&quot; /&gt;
</code></pre>
</code></pre>
                            </li>
                            <li>
                                Set the widget's theme property to 'energyblue' when you initialize it.
                            </li>
                        </ul>
                                                                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/f4GFH/">theme is set to 'energyblue'</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>scrollAnimationDuration</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    250
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Sets or gets the duration of the scroll animation.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>scrollAnimationDuration</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ scrollAnimationDuration: 200 }); </code></pre>
                         <p>
                            Get the <code>scrollAnimationDuration</code> property.
                        </p>
                        <pre><code>var scrollAnimationDuration = $('#jqxTabs').jqxTabs('scrollAnimationDuration'); </code></pre>
                                                                      <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3wM8U/">scrollAnimationDuration is set to 3000</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>enabledHover</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Enables or disables the tabs hover effect.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>enabledHover</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ enabledHover: false }); </code></pre>
                         <p>
                            Get the <code>enabledHover</code> property.
                        </p>
                        <pre><code>var enabledHover = $('#jqxTabs').jqxTabs('enabledHover'); </code></pre>
                                               <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4yh9h/">enabledHover is set to false</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>collapsible</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Enables or disables the collapsible feature.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                           Set the <code>collapsible</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ collapsible: false }); </code></pre>
                        <p>
                            Get the <code>collapsible</code> property.
                        </p>
                        <pre><code>var collapsible = $('#jqxTabs').jqxTabs('collapsible'); </code></pre>
                                   <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ghzBF/">collapsible is set to true</a></div>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>animationType</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    none
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets the animation type of switching tabs.</p>
                         <b>Possible Values:</b>
                        <br />
                        <pre><code>'none'</code></pre>
    <pre><code>'fade'</code></pre>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>animationType</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ animationType: 'fade' }); </code></pre>
                        <p>
                            Get the <code>animationType</code> property.
                        </p>
                        <pre><code>var animationType = $('#jqxTabs').jqxTabs('animationType'); </code></pre>
                                <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TDhDX/">animationType is set to 'fade'</a></div>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>enableScrollAnimation</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Sets or gets whether the scroll animation is enabled.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>enableScrollAnimation</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ enableScrollAnimation:false }); </code></pre>
                         <p>
                            Get the <code>enableScrollAnimation</code> property.
                        </p>
                        <pre><code>var enableScrollAnimation = $('#jqxTabs').jqxTabs('enableScrollAnimation'); </code></pre>
                                 <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GKekC/">enableScrollAnimation is set to false</a></div>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>contentTransitionDuration</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    450
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Sets or gets the duration of the content's fade animation which occurs when the user selects a tab. This setting has effect 
                           when the 'animationType' is set to 'fade'.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                           Set the <code>contentTransitionDuration</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ contentTransitionDuration:500 }); </code></pre>
                         <p>
                            Get the <code>contentTransitionDuration</code> property.
                        </p>
                        <pre><code>var contentTransitionDuration = $('#jqxTabs').jqxTabs('contentTransitionDuration'); </code></pre>
                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SDjGG/">contentTransitionDuration is set to 3000</a></div>
                    </div>
                </td>
            </tr>       
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>toggleMode</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    click
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Sets or gets user interaction used for switching the different tabs.</p>
                         <b>Possible Values:</b>
                        <br />
                        <pre><code>'click'</code></pre>
                       <pre><code>'dblclick'</code></pre>
                        <pre><code>'mouseenter'</code></pre>
                       <pre><code>'none'</code></pre>
                        <h4>
                            Code examples</h4>
                        <p>
                           Set the <code>toggleMode</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ toggleMode:'mouseenter' }); </code></pre>
                        <p>
                            Get the <code>toggleMode</code> property.
                        </p>
                        <pre><code>var toggleMode = $('#jqxTabs').jqxTabs('toggleMode'); </code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UySsx/">toggleMode is set to 'dlclick'</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>selectedItem</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    0
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Sets or gets selected tab.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>selectedItem</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ selectedItem: 2 }); </code></pre>
                        <p>
                            Get the <code>selectedItem</code> property.
                        </p>
                        <pre><code>var selectedItem = $('#jqxTabs').jqxTabs('selectedItem'); </code></pre>
                             <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MGvwb/">selectedItem is set to 1</a></div>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span12'>position</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    top
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets whether the tabs are positioned at 'top' or 'bottom.</p>
                         <b>Possible Values:</b>
                        <br />
                        <pre><code>'top'</code></pre>
    <pre><code>'bottom'</code></pre>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>position</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ position:"bottom" }); </code></pre>
                         <p>
                            Get the <code>position</code> property.
                        </p>
                        <pre><code>var position = $('#jqxTabs').jqxTabs('position'); </code></pre>
                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MyUwQ/">position is set to 'bottom'</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span13'>selectionTracker</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets whether the selection tracker is enabled.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>selectionTracker</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ selectionTracker:false}); </code></pre>
                         <p>
                            Get the <code>selectionTracker</code> property.
                        </p>
                        <pre><code>var selectionTracker = $('#jqxTabs').jqxTabs('selectionTracker'); </code></pre>
                                <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sNEqt/">selectionTracker is set to true</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span14'>scrollable</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets whether the scrolling is enabled.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>scrollable</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ scrollable:false}); </code></pre>
                        <p>
                            Get the <code>scrollable</code> property.
                        </p>
                        <pre><code>var scrollable = $('#jqxTabs').jqxTabs('scrollable'); </code></pre>
                                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xpeQu/">scrollable is set to false</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span15'>scrollPosition</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'right'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                         Sets or gets the position of the scroll arrows.</p>
                         <b>Possible Values:</b>
                        <br />
                        <pre><code>'left'</code></pre>
                         <pre><code>'right'</code></pre>
                         <pre><code>'both'</code></pre>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>scrollPosition</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ scrollPosition:'right'}); </code></pre>
                        <p>
                            Get the <code>scrollPosition</code> property.
                        </p>
                        <pre><code>var scrollPosition = $('#jqxTabs').jqxTabs('scrollPosition'); </code></pre>
                              <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/t9qbm/">scrollPosition is set to 'both'</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>scrollStep</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    70
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Sets or gets the scrolling step.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>scrollStep</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ scrollStep:80}); </code></pre>
                        <p>
                            Get the <code>scrollStep</code> property.
                        </p>
                        <pre><code>var scrollStep = $('#jqxTabs').jqxTabs('scrollStep'); </code></pre>
                                        <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/53w7S/">scrollStep is set to 100</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span17'>autoHeight</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                         Sets or gets whether the jqxTabs header's height will be equal to the item with max height.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>autoHeight</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ autoHeight: false}); </code></pre>
                        <p>
                            Get the <code>autoHeight</code> property.
                        </p>
                        <pre><code>var autoHeight = $('#jqxTabs').jqxTabs('autoHeight'); </code></pre>
                                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HpGSK/">autoHeight is set to false</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span18'>showCloseButtons</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets whether a close button is displayed in each tab.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                           Set the <code>showCloseButtons</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ showCloseButtons:false}); </code></pre>
                        <p>
                            Get the <code>showCloseButtons</code> property.
                        </p>
                        <pre><code>var showCloseButtons = $('#jqxTabs').jqxTabs('showCloseButtons'); </code></pre>
                                                                   <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/K37dF/">showCloseButtons is set to true</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>closeButtonSize</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    16
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                         Sets or gets the close button size.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>closeButtonSize</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ closeButtonSize:20}); </code></pre>
                        <p>
                            Get the <code>closeButtonSize</code> property.
                        </p>
                        <pre><code>var closeButtonSize = $('#jqxTabs').jqxTabs('closeButtonSize'); </code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GXFRC/">closeButtonSize is set to 20</a></div>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span67'>initTabContent</span>
                </td>
                <td>
                    <span>function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Callback function that the tab calls when a content panel needs to be initialized.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>initTabContent</code> property.
                        </p>
                        <pre><code>

        $(document).ready(function () {
            var loadPage = function (url, tabIndex) {
                $.get(url, function (data) {
                    // dynamically appends data returned from a server to a content element with ID equal to "content1" 
                    // for the first tab, "content2" for the second tab or "content3" for the third tab. 
                    $('#content' + tabIndex).html(data);
                });
            }

            // Create jqxTabs.
            $('#jqxTabs').jqxTabs({
                width: 580, height: 200,
                initTabContent:
                   function (tab) {
                       // The 'tab' parameter represents the selected tab's index.
                       var pageIndex = tab + 1;
                       loadPage('pages/ajax' + pageIndex + '.htm', pageIndex);
                   }
            });
        });
                        </code></pre>
                                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2nbr7/">initTabContent is set to a custom function</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span21'>keyboardNavigation</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Enables or disables the keyboard navigation.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>keyboardNavigation</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({ keyboardNavigation: false}); </code></pre>
                        <p>
                            Get the <code>keyboardNavigation</code> property.
                        </p>
                        <pre><code>var keyboardNavigation = $('#jqxTabs').jqxTabs('keyboardNavigation'); </code></pre>
                        <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/A9zAC/">keyboardNavigation is set to a false</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>reorder</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Enables or disables the reorder feature. When this feature is enabled, the end-user can drag a tab and drop it over another tab. As a result the tabs will be reordered.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>reorder</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({reorder:true}); </code></pre>
                        <p>
                            Get the <code>reorder</code> property.
                        </p>
                        <pre><code>var reorder = $('#jqxTabs').jqxTabs('reorder'); </code></pre>
                                <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5fSCq/">reorder is set to a true</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span23'>enableDropAnimation</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                         Sets or gets whether the drop animation is enabled.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>enableDropAnimation</code> property.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs({enableDropAnimation: true}); </code></pre>
                        <p>
                            Get the <code>enableDropAnimation</code> property.
                        </p>
                        <pre><code>var enableDropAnimation = $('#jqxTabs').jqxTabs('enableDropAnimation'); </code></pre>
                                <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7K2mN/">enableDropAnimation is set to a true</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span56'>dropAnimationDuration</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    250
                </td>
            </tr>
         
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Events</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span27'>created</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        This event is triggered when the jqxTabs is created. You should subscribe to this event before the jqxTabs initialization.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>created</code> event by type: jqxTabs.
                        </p>
                        <pre><code>$('#jqxTabs').on('created', function () { // Some code here. }); </code></pre>
                                    <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4LHn6/"> Bind to the created event by type: jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span24'>selected</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        This event is triggered when the user selects a new tab.   
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                             Bind to the <code>selected</code> event by type: jqxTabs.
                        </p>
                        <pre><code>$('#jqxTabs').on('selected', function (event) 
{ 
    var selectedTab = event.args.item;
}); </code></pre>
                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/RaXVR/"> Bind to the selected event by type: jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
              <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>tabclick</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        This event is triggered when the user click a tab. You can retrieve the clicked tab's index.    
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>tabclick</code> event by type: jqxTabs.
                        </p>
                        <pre><code>  $('#jqxTabs').on('tabclick', function (event) 
{ 
    var clickedItem = event.args.item; 
}); </code></pre>
                             <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/g3KsF/"> Bind to the tabclick event by type: jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span25'>add</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        This event is triggered when a new tab is added to the jqxTabs.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                          Bind to the <code>add</code> event by type: jqxTabs.
                        </p>
                        <pre><code>$('#jqxTabs').on('add', function (event) { // Some code here. }); </code></pre>
                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/73h7n/"> Bind to the add event by type: jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>removed</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        This event is triggered when a tab is removed.  
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>removed</code> event by type: jqxTabs.
                        </p>
                        <pre><code>$('#jqxTabs').on('removed', function (event) { // Some code here. }); </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gRaUz/"> Bind to the removed event by type: jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
         
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span30'>selecting</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        This event is triggered when the user selects a tab. This event is cancelable. You can 
                        cancel the selection by setting the 'event.cancel = true' in the event callback.  
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>selecting</code> event by type: jqxTabs
                        </p>
                        <pre><code>$('#jqxTabs').on('selecting', function (event) { // Some code here. }); </code></pre>
                        <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9aE5Y/"> Bind to the selecting event by type: jqxTabs.</a></div>
                    </div>

                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span31'>unselecting</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        This event is triggered when the user selects a tab. The last selected tab is going to become unselected. This event is cancelable. You can 
                        cancel the selection by setting the 'event.cancel = true' in the event callback. 
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>unselecting</code> event by type: jqxTabs
                        </p>
                        <pre><code>$('#jqxTabs').on('unselecting', function (event) { // Some code here. }); </code></pre>
                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/PcMKU/"> Bind to the unselecting event by type: jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span32'>unselected</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        This event is triggered when the user selects a tab. The last selected tab becomes unselected.   
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                             Bind to the <code>unselected</code> event by type: jqxTabs
                        </p>
                        <pre><code>$('#jqxTabs').on('unselected', function (event) { // Some code here. }); </code></pre>
                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5c4Q2/"> Bind to the unselected event by type: jqxTabs.</a></div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span33'>dragStart</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        This event is triggered when the drag operation started.  
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                           Bind to the <code>dragStart</code> event by type: jqxTabs
                        </p>
                        <pre><code>$('#jqxTabs').on('dragStart', function () { // Some code here. }); </code></pre>
                              <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/RsYLR/"> Bind to the dragStart event by type: jqxTabs.</a></div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span34'>dragEnd</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        This event is triggered when the drag operation ended.   
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>dragEnd</code> event by type: jqxTabs
                        </p>
                        <pre><code>$('#jqxTabs').on('dragEnd', function (event) { // Some code here. }); </code></pre>
                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/JaueQ/"> Bind to the dragEnd event by type: jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
  <tr>
                <td class="documentation-option-type-click">
                    <span id='Span59'>collapsed</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Theis event is triggered when any tab is collapsed.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                             Bind to the <code>collapsed</code> event by type: jqxTabs
                        </p>
                        <pre><code>$('#jqxTabs').on('collapsed', function (event) { // Some code here. }); </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/NNQnb/"> Bind to the collapsed event by type: jqxTabs.</a></div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span60'>expanded</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        This event is triggered when any tab is expanded.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                             Bind to the <code>expanded</code> event by type: jqxTabs
                        </p>
                        <pre><code>$('#jqxTabs').on('expanded', function (event) { // Some code here. }); </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ckFwU/"> Bind to the expanded event by type: jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Methods</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span37'>disable</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Disabling the widget.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>disable</code> method.
                        </p>
                        
                        <pre><code>$('#jqxTabs').jqxTabs('disable'); </code></pre>
                                  <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/D6J4f/">disables the  jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span35'>enable</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enabling the widget.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>enable</code> method.
                        </p>
                        
                        <pre><code>$('#jqxTabs').jqxTabs('enable'); </code></pre>
                                                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/f4n4J/">enables the  jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span36'>removeAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Removing tab with indicated index.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>removeAt</code> method.
                        </p>
                        
                        <pre><code>$('#jqxTabs').jqxTabs('removeAt', 3); </code></pre>
                                     <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3xErb/">removes a tab in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span38'>removeFirst</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Removing the first tab.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>removeFirst</code> method.
                        </p>
                        
                        <pre><code>$('#jqxTabs').jqxTabs('removeFirst'); </code></pre>
                                     <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/yFeTd/">removes the firts tab in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span39'>removeLast</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Removing the last tab.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>removeLast</code> method.
                        </p>
                        
                        <pre><code>$('#jqxTabs').jqxTabs('removeLast'); </code></pre>
                                 <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/B9etM/">removes the last tab in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span62'>collapse</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Collapsing the current selected tab.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>collapse</code> method.
                        </p>
                        
                        <pre><code>$('#jqxTabs').jqxTabs('collapse'); </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/yQx6v/">collapses the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span63'>expand</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Expanding the current selected tab.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>expand</code> method.
                        </p>
                        
                        <pre><code>$('#jqxTabs').jqxTabs('expand'); </code></pre>
                                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UycFM/">expands the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span40'>disableAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                         Disabling tab with indicated index.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>disableAt</code> method.
                        </p>                       
                        <pre><code>$('#jqxTabs').jqxTabs('disableAt', 3); </code></pre>
                                   <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/u9YSr/">disables a tab in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>

             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span41'>enableAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                         Enabling tab with indicated index.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>enableAt</code> method.
                        </p>                       
                        <pre><code>$('#jqxTabs').jqxTabs('enableAt', 3); </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VLYkW/">enables a tab in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span42'>addAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Adding tab at indicated position.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>addAt</code> method.
                        </p>                       
                        <pre><code>$('#jqxTabs').jqxTabs('addAt', 3, tabTitle, tabContent); </code></pre>
                          <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pLRuy/">adds a new tab in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span43'>addFirst</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Adding tab at the beginning.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>addFirst</code> method.
                        </p>
                        
                        <pre><code>$('#jqxTabs').jqxTabs('addFirst', element); </code></pre>
                             <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/d8vD5/">adds a new fisrt tab in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>  
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span44'>addLast</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Adding tab at the end.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>addLast</code> method.
                        </p>
                        
                        <pre><code>$('#jqxTabs').jqxTabs('addLast', element); </code></pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/eLt97/">adds a new last tab in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span45'>select</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Selecting tab with indicated index.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>select</code> method.
                        </p>                      
                        <pre><code>$('#jqxTabs').jqxTabs('select', 3); </code></pre>
                                <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VWPKL/">selects a  tab in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span46'>length</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Returning the tabs count.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>length</code> method.
                        </p>
                        
                        <pre><code>var length = $('#jqxTabs').jqxTabs('length'); </code></pre>
                                 <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Pb3sB/">gets the length of the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span20'>setContentAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Sets the content of a Tab.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>setContentAt</code> method.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs('setContentAt', i, html); </code></pre>
                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/D67hd/">sets new content of a tab in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span66'>getContentAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Gets the content of a Tab. The returned value is a HTML Element.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>getContentAt</code> method.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs('getContentAt', i); </code></pre>
                           <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qZxY4/">gets the content of a tab in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span64'>setTitleAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Sets the title of a Tab.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>setTitleAt</code> method.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs('setTitleAt', i, text); </code></pre>
                             <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/E5UM6/">sets new title of a tab in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span65'>getTitleAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Gets the title of a Tab. The returned value is a "string".
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>getTitleAt</code> method.
                        </p>
                        <pre><code>var text = $('#jqxTabs').jqxTabs('getTitleAt', i); </code></pre>
                                              <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mCWLG/">gets the title of a tab in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span51'>showCloseButtonAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Showing close button at a specific position.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>showCloseButtonAt</code> method.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs('showCloseButtonAt', 1); </code></pre>
                                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mCWLG/">shows the close button of a tab in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span52'>hideCloseButtonAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Hiding a close button at a specific position.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>hideCloseButtonAt</code> method.
                        </p>
                        
                        <pre><code>$('#jqxTabs').jqxTabs('hideCloseButtonAt', 3); </code></pre>
                                                                  <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9yd8X/">hides the close button of a tab in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span53'>hideAllCloseButtons</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Hiding all close buttons.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>hideAllCloseButtons</code> method.
                        </p>
                        
                        <pre><code>$('#jqxTabs').jqxTabs('hideAllCloseButtons'); </code></pre>
                                 <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8vEGq/">hides the close buttons in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span54'>showAllCloseButtons</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                       Showing all close buttons.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>showAllCloseButtons</code> method.
                        </p>
                        
                        <pre><code>$('#jqxTabs').jqxTabs('showAllCloseButtons'); </code></pre>
                                <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pR37p/">shows the close buttons in the jqxTabs.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span55'>ensureVisible</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>This method is ensuring the visibility of item with indicated index. If the item is currently not visible the method is scrolling to it.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>ensureVisible</code> method.
                        </p>                        

                        <pre><code>$('#jqxTabs').jqxTabs('ensureVisible', 3); </code></pre>
                                      <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8mhfx/">Bring a tab into the view.</a></div>        
                    </div>
                </td>
            </tr>

         
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span48'>focus</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Focuses the widget.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>focus</code> method.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs('focus'); </code></pre>
                                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8PDcy/">focuses the jqxTabs.</a></div>          
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span47'>destroy</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Destroys the widget.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>destroy</code> method.
                        </p>
                        <pre><code>$('#jqxTabs').jqxTabs('destroy'); </code></pre>
                                <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jrFH8/">destroy the jqxTabs.</a></div>          
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span50'>val</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the selected tab.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>val</code> method.
                        </p>
                        // Get the selected tab's index.
                        <pre><code>var value = $("#jqxTabs").jqxTabs('val');</code></pre>                       
                        // Get the selected tab's index using jQuery's val()
                        <pre><code>var value = $("#jqxTabs").val();</code></pre>                       
                        // Set the selected tab.
                            <pre><code>$("#jqxTabs").jqxTabs('val', 2);</code></pre>                       
                        // Set the selected tab using jQuery's val().
                            <pre><code>$("#jqxTabs").val(2);</code></pre>        
                         <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/NGRSy/">sets the selected tab in the jqxTabs.</a></div>                                      
                    </div>
                </td>
            </tr>
        </table>
        <br />
    </div>
</body>
</html>
